
(function ($, win, doc, body) {
  var
    usercards = {
      '50d63d62-5342-4473-b942-753ebed4367a' : {
        id : '50d63d62-5342-4473-b942-753ebed4367a',
        avatar : 'images/31e9af45-304b-4cf8-b978-5f7f325a2553_size_82-82.jpg',
        username : 'Dmitri Frolov',
        usergroup : 'Web Design',
        email : 'dmitry.frolov@avsmedia.net'
      },
      '13d63d60-5342-4473-b942-753ebed4367a' : {
        id : '13d63d60-5342-4473-b942-753ebed4367a',
        avatar : 'images/58e9af45-304b-4cf8-b978-1f7f325a2553_size_82-82.jpg',
        username : 'Lisa Gerrard',
        usergroup : 'Web Design',
        email : 'lisa.gerrard@avsmedia.net'
      }
    },
    currentUserlink = null,
    cardTimeout = 1000,
    timeoutHandler = 0,
	  usercardContainer = null;

  function onUserlinkMouseover (evt) {
    var userid = this.getAttribute('data-userid');
    if (userid) {
      currentUserlink = this;
      timeoutHandler = setTimeout(getMouseoverCallback(userid), cardTimeout);
    }
  }

  function onUserlinkMouseout (evt) {
    clearTimeout(timeoutHandler);

    usercardContainer.className = usercardContainer.className.replace(' loading', '');
    if (usercardContainer.className.indexOf(' default') === -1) {
			usercardContainer.className += ' default';
			document.body.appendChild(usercardContainer);
		}

    if (currentUserlink) {
  		currentUserlink.className = currentUserlink.className.replace(' showed-card', '');
		}
    currentUserlink = null;
  }

  function onGetUserInfo (response) {
    //TODO:
  }

  function bindUserlinkEvents ($o) {
    $o.parent().hover(onUserlinkMouseover, onUserlinkMouseout);
	  return $o;
	}

  function getMouseoverCallback (userid) {
    return function () {
      showUserCard(userid);
    };
  }

  function showUserCard (userid) {
    var
      userlink = currentUserlink;

    if (!usercardContainer || !userlink) {
      return undefined;
    }

    if (userlink.className.indexOf(' showed-card') !== -1) {
			return undefined;
		}

    if (userid) {
			userlink.appendChild(usercardContainer);
		  userlink.className += ' showed-card';
      usercardContainer.className = usercardContainer.className.replace(' default', '');
  		usercardContainer.className += ' loading';
      getUserUnfo(userid);
    }

    delete userlink;
  }

  function getUserUnfo (userid) {
    if (userid && usercards.hasOwnProperty(userid)) {
			setTimeout(function () {
        updateUsercard(usercardContainer, usercards[userid]);
      }, 2000);
      return undefined;
    }

    //TODO:
  }

	function renderUsercard () {
		var
		  o = null,
			html = null;

    html = [
      '<div class="tmusercard-container">',
        '<div class="tmusercard-content">',
			    '<img class="avatar" />',
          '<div class="inner-block">',
            '<span class="username ellipsis"></span>',
            '<span class="usergroup ellipsis"></span>',
            '<a class="email ellipsis" href="/"></a>',
          '</div>',
          '<button class="ui-btn ui-btn-clear im-client"></button>',
        '</div>',
      '</div>'
	  ];

	  o = doc.createElement('div');
		o.className = 'tmusercard-wrapper default';
		o.innerHTML = html.join('');
		return o;
	}

  function updateUsercard (o, data) {
    var $o = $(o);
    data = data && typeof data === 'object' ? data : {};

    if (data.hasOwnProperty('id')) {
      $o.find('div.tmusercard-container:first').attr('data-id', data.id);
    }

    if (data.hasOwnProperty('avatar')) {
      $o.find('img.avatar:first').attr('src', data.avatar);
    }
    if (data.hasOwnProperty('username')) {
      $o.find('span.username:first').text(data.username);
    }
    if (data.hasOwnProperty('usergroup')) {
      $o.find('span.usergroup:first').text(data.usergroup);
    }
    if (data.hasOwnProperty('email')) {
      $o.find('div.tmusercard-container:first').attr('data-email', data.email);
      $o.find('a.email:first').attr('href', 'mailto:' + data.email).text(data.email);
    }
		$o.removeClass('loading');
  }

  function updateUserlink ($o) {
		var
      o = null,
      innertext = null;

		if (usercardContainer === null) {
			usercardContainer = renderUsercard();
			body.appendChild(usercardContainer);
      $(win).trigger('render-tmusercard', [$(usercardContainer)]);
		}

    o = $o.length > 0 ? $o[0] : o;
    if (o) {
      var container = doc.createElement('span');
      container.className = 'tmuserlink-container' + (o.className ? ' ' + o.className : '');
			o.parentNode.insertBefore(container, o);
			container.appendChild(o);
			container.setAttribute('data-userid', o.getAttribute('data-userid'));
			//innertext.innerHTML = o.innerHTML;
			//o.innerHTML = '';
      //o.appendChild(innertext);
      
    }
		return bindUserlinkEvents($o);
	}

  $.fn.tmUserlink = $.fn.tmuserlink = function () {
    var
      $this = $(this),
      $link = null,
      $links = $this,
      linksInd = 0;

    linksInd = $links.length;
    while (linksInd--) {
      if (($link = $($links[linksInd])).hasClass('tmuserlink')) {
        continue;
      }
      updateUserlink($link);
			$link.addClass('tmuserlink')
    }

    var
      zindex = 0,
      $userlinks = $('.tmuserlink'),
      userlinksInd = $userlinks.length;
    while (userlinksInd--) {
      $userlinks[userlinksInd].parentNode.style.zIndex = ++zindex;
    }

    return $this;
  };
})(jQuery, window, document, document.body);

(function ($, win, doc, body) {
  function onInputBlur (evt) {
    var
      container = this.parentNode,
      classname = container.className;
    if (classname.indexOf(' focus') !== -1) {
      container.className = classname.replace(' focus', '');
    }
  }

  function onInputFocus (evt) {
    var
      container = this.parentNode,
      classname = container.className;
    if (classname.indexOf(' focus') === -1) {
      container.className = classname + ' focus';
    }
  }

  function bindInputEvents ($o) {
    $o
      .blur(onInputBlur)
      .focus(onInputFocus);

    return $o;
  } 

  function updateInput ($o) {
    var
      o = null,
      container = null;

    o = $o.length > 0 ? $o[0] : o;
    if (o) {
      container = doc.createElement('div');
      container.className = 'tmtextfield-container';
      o.parentNode.insertBefore(container, o);
      container.appendChild(o);
      
    }
    return bindInputEvents($o);
  }

  $.fn.tmTextfield = $.fn.tmtextfield = function () {
    var
      $this = $(this),
      $input = null,
      $inputs = $this.filter('input'),
      inputsInd = 0;

    inputsInd = $inputs.length;
    while (inputsInd--) {
      if (($input = $($inputs[inputsInd])).hasClass('tmtextfield')) {
        continue;
      }
      updateInput($input.addClass('tmtextfield'));
    }

    return $this;
  };
})(jQuery, window, document, document.body);
